<template>
	<view class="page-body">
		<!-- 页面内容开始 -->
		<view class="separate_page">
			<view>数据统计:</view>
			<view class="dflex">
				<view class="tag">
					<view class="tagTitle">
						<vk-data-icon name="el-icon-s-custom" size="20" color="#fff"></vk-data-icon>
						<view class="tag_title">总用户数</view>
					</view>
					<view class="tag_data">
						{{totalUser}}
					</view>
				</view>
				<view class="tag">
					<view class="tagTitle">
						<vk-data-icon name="el-icon-chat-dot-square" size="20" color="#fff"></vk-data-icon>
						<view class="tag_title">总头像分类数</view>
					</view>
					<view class="tag_data">
						{{totalArticle}}
					</view>
				</view>
				<view class="tag">
					<view class="tagTitle">
						<vk-data-icon name="el-icon-chat-dot-square" size="20" color="#fff"></vk-data-icon>
						<view class="tag_title">总头像数</view>
					</view>
					<view class="tag_data">
						{{totalChat}}
					</view>
				</view>
				<view class="tag">
					<view class="tagTitle">
						<vk-data-icon name="vk-icon-emojilight" size="20" color="#fff"></vk-data-icon>
						<view class="tag_title">小程序数</view>
					</view>
					<view class="tag_data">
						{{totalxcx}}
					</view>
				</view>
				<!-- <view class="tag">
					<view class="tagTitle">
						<vk-data-icon name="vk-icon-emojilight" size="20" color="#fff"></vk-data-icon>
						<view class="tag_title">总表情数</view>
					</view>
					<view class="tag_data">
						{{totalEmjio}}
					</view>
				</view>
				<view class="tag">
					<view class="tagTitle">
						<vk-data-icon name="vk-icon-news_hot_light" size="20" color="#fff"></vk-data-icon>
						<view class="tag_title">总文章数</view>
					</view>
					<view class="tag_data">
						{{totalArticle}}
					</view>
				</view> -->
			</view>
		</view>
		<view class="separate_page">
			<view class="uni-container">
				<view>UV统计:</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :chartData="chartsDataLine1" />
				</view>

				<!-- 	<view class="idea-day-line">
				<view class="charts-title">想法日增长量</view>
				<qiun-data-charts type="line" :chartData="ideaDayLineData" />
			</view> -->
				<!-- <view class="box">
				<view class="idea-type-pie">
					<view class="charts-title">想法分类数量统计</view>
					<qiun-data-charts type="pie" :chartData="ideaClassifyPieData" />
				</view>
				<view class="user-fans-column">
					<view class="charts-title">用户粉丝数量排名前七</view>
					<qiun-data-charts type="column" :chartData="userFansTopColumnData" />
				</view>
			</view>
			<view class="box">
				<view class="idea-bar">
					<view class="charts-title">想法收藏数量排名前十</view>
					<qiun-data-charts type="bar" :chartData="ideaCollectBarData" />
				</view>
				<view class="idea-bar">
					<view class="charts-title">想法点赞数量排名前十</view>
					<qiun-data-charts type="bar" :chartData="ideaPraiseBarData" />
				</view>
				<view class="idea-bar">
					<view class="charts-title">想法评论数量排名前十</view>
					<qiun-data-charts type="bar" :chartData="ideaCommentBarData" />
				</view>
			</view> -->
			</view>
		</view>

		<!-- 页面内容结束 -->
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk = uni.vk; // vk实例
	var action = "admin/index/index/sys"
	import demodata from './mockdata/demodata.json';
	import mapdata from './mockdata/mapdata.json'

	export default {
		props: {

		},
		data() {
			// 页面数据变量
			return {
				totalArticle: 0,
				totalChat: 0,
				totalEmjio: 0,
				totalUser: 0,
				totalxcx:0,
				// init请求返回的数据
				data: {
					tblHeight: 0,
					start: 0,
					options: {
						useEasing: true, // 缓动动画 easing
						useGrouping: true, // 1,000,000 vs 1000000
						separator: ',', // 数字分隔符
						decimal: '.', // 小数分隔符
						prefix: '', // 前缀
						suffix: '' // 后缀
					},
					options_price: {
						useEasing: true, // 缓动动画 easing
						useGrouping: true, // 1,000,000 vs 1000000
						separator: ',', // 数字分隔符
						decimal: '.', // 小数分隔符
						prefix: '￥', // 前缀
						suffix: '' // 后缀
					},
					member_sta: {},
					days: '日',
					tableData_visit: [],
					tableData_browse: [],
					// 想法日增长量 时间
					ideaDayLineTime: new Date().getTime(),
					ideaDayLineData: {},
					ideaDayLineLoading: false,
					// 想法分类数量统计
					ideaClassifyPieData: {},
					ideaClassifyLoading: false,
					// 用户粉丝数量排名
					userFansTopColumnData: {},
					userFansTopLoading: false,
					// 想法收藏数量排名
					ideaCollectBarData: {},
					ideaCollectLoading: false,
					// 想法点赞数量排名
					ideaPraiseBarData: {},
					ideaPraiseLoading: false,
					// 想法评论数量排名
					ideaCommentBarData: {},
					ideaCommentLoading: false,
				},
				// 表单请求数据
				form1: {

				},
				chartsDataLine1: {}
			}
		},
		mounted() {
			this.fnRefresh();
		},
		watch: {
			
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);

			// this.chartsDataLine1 = JSON.parse(JSON.stringify(demodata.Line))
			console.log(this.chartsDataLine1)

		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {


		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {


		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				console.log("----")
				vk.callFunction({
					url: 'admin/index/index/sys/getInfo',
					data: {},
					success: (data) => {
						console.log("----111")
						console.log(data.data)
						that.totalArticle = data.data['total-classify']
						that.totalChat = data.data['total-list']
						that.totalxcx = data.data['total-xcx']
						that.totalUser = data.data['total-user']
						that.chartsDataLine1 = data.record
					}
				});
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			load(e) {
				console.log(1, e);
			},
			error(e) {
				console.log(2, e);
			}, // 刷新重置图表数据
			fnRefresh() {
				// 想法日增长量 取时间戳 年月日
				const now = new Date();
				const toDayTime = new Date(
					now.getFullYear(),
					now.getMonth(),
					now.getDate()
				).getTime();
				this.ideaDayLineTime = toDayTime;
				this.fnIdeaDayData(toDayTime);
				// 加载
				this.fnIdeaClassify();
				this.fnUserFansTop();
				this.fnIdeaCollectTopData();
				this.fnIdeaPraiseTopData();
				this.fnIdeaCommentTopData();
			},
			// 获取想法日增长量
			fnIdeaDayData(val) {
				if (this.ideaDayLineLoading || this.refreshLoading) {
					return;
				}
				this.ideaDayLineLoading = true;
				this.ideaDayLineData = {};

				ideaDayData({
						time: val,
						day: 7,
					})
					.then((res) => {
						this.$log(this.$options.name, "ideaDayData res=>", res);
						this.ideaDayLineLoading = false;
						if (res.code === 200) {
							this.ideaDayLineData = res.data;
						}
					})
					.catch((err) => {
						this.$log(this.$options.name, "ideaDayData err=>", err);
						this.ideaDayLineLoading = false;
					});
			},
			// 获取想法分类数量统计
			fnIdeaClassify() {
				if (this.ideaClassifyLoading) {
					return;
				}
				this.ideaClassifyLoading = true;
				this.ideaClassifyPieData = {};

				ideaClassifyData()
					.then((res) => {
						this.$log(this.$options.name, "ideaClassifyData res=>", res);
						this.ideaClassifyLoading = false;
						if (res.code === 200) {
							this.ideaClassifyPieData = res.data;
						}
					})
					.catch((err) => {
						this.$log(this.$options.name, "ideaClassifyData err=>", err);
						this.ideaClassifyLoading = false;
					});
			},
			// 获取用户粉丝数量排名
			fnUserFansTop() {
				if (this.userFansTopLoading) {
					return;
				}
				this.userFansTopLoading = true;
				this.userFansTopColumnData = {};

				userFansTopData(7)
					.then((res) => {
						this.$log(this.$options.name, "userFansTopData res=>", res);
						this.userFansTopLoading = false;
						if (res.code === 200) {
							this.userFansTopColumnData = res.data.chart;
						}
					})
					.catch((err) => {
						this.$log(this.$options.name, "userFansTopData err=>", err);
						this.userFansTopLoading = false;
					});
			},
			// 获取想法收藏数量排名
			fnIdeaCollectTopData() {
				if (this.ideaCollectLoading) {
					return;
				}
				this.ideaCollectLoading = true;
				this.ideaCollectBarData = {};

				ideaFieldTopData({
						type: "collect",
						top: 10,
					})
					.then((res) => {
						this.$log(
							this.$options.name,
							"ideaCollectTopData collect res=>",
							res
						);
						this.ideaCollectLoading = false;
						if (res.code === 200) {
							this.ideaCollectBarData = res.data.chart;
						}
					})
					.catch((err) => {
						this.$log(
							this.$options.name,
							"ideaCollectTopData collect err=>",
							err
						);
						this.ideaCollectLoading = false;
					});
			},
			// 获取想法点赞数量排名
			fnIdeaPraiseTopData() {
				if (this.ideaPraiseLoading) {
					return;
				}
				this.ideaPraiseLoading = true;
				this.ideaPraiseBarData = {};

				ideaFieldTopData({
						type: "praise",
						top: 10,
					})
					.then((res) => {
						this.$log(this.$options.name, "ideaPraiseTopData praise res=>", res);
						this.ideaPraiseLoading = false;
						if (res.code === 200) {
							this.ideaPraiseBarData = res.data.chart;
						}
					})
					.catch((err) => {
						this.$log(this.$options.name, "ideaPraiseTopData praise err=>", err);
						this.ideaPraiseLoading = false;
					});
			},
			// 想法评论数量排名
			fnIdeaCommentTopData() {
				if (this.ideaCommentLoading) {
					return;
				}
				this.ideaCommentLoading = true;
				this.ideaCommentBarData = {};

				ideaFieldTopData({
						type: "comment",
						top: 10,
					})
					.then((res) => {
						this.$log(this.$options.name, "ideaCommentTopData praise res=>", res);
						this.ideaCommentLoading = false;
						if (res.code === 200) {
							this.ideaCommentBarData = res.data.chart;
						}
					})
					.catch((err) => {
						this.$log(this.$options.name, "ideaCommentTopData praise err=>", err);
						this.ideaCommentLoading = false;
					});
			},
		},
		// 过滤器
		filters: {

		},
		// 计算属性
		computed: {

		}
	}
</script>
<style lang="scss" scoped>
	.separate_page {
		background-color: #fff;
		margin-bottom: 16px;
		padding: 20px;
		border-radius: 10px;
	}

	.tag {
		margin-top: 2.1875rem;
		width: 15rem;
		height: 6.25rem;
		background-color: #7d6aff;
		border-radius: 0.625rem;
		margin-right: 2.5rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 0.625rem;
		color: white;
	}

	.tagTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.tag:nth-child(2) {
		background-color: #ffa66a;
	}

	.tag:nth-child(3) {
		background-color: #ff6b6b;
	}

	.tag:nth-child(4) {
		background-color: #69b5ff;
	}

	.tag:nth-child(5) {
		background-color: #b96bff;
	}

	.tag:nth-child(6) {
		background-color: #e9c52b;
	}

	.tag i {
		font-size: 2.1875rem;
		margin-right: 1.5625rem;
		color: #fff;
	}

	.tag_title {
		margin-left: 10rpx;
		// font-size: 0.875rem;
		color: #fff;
	}

	.tag_data {
		font-size: 1.5625rem;
		font-weight: 400;
		color: #fff;
	}

	.order {
		padding-top: 2rem;
	}

	.stats_area {
		height: 38rem;
		overflow: hidden;
	}

	.card {
		margin-top: 1rem;
	}

	.circle_txt {
		font-size: 1.25rem;
		text-align: center;
		line-height: 3.75rem;
		margin-bottom: 2.5rem;
		color: #fff;
		margin-right: 1.25rem;
		margin-left: 2.1875rem;
		width: 3.75rem;
		height: 3.75rem;
		border-radius: 50%;
		background-color: #ff6b6b;
	}

	.dflex {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.dflex:nth-child(2) .circle_txt {
		background-color: #7e6aff;
	}

	.dflex:nth-child(3) .circle_txt {
		background-color: #69b5ff;
	}

	.dflex:nth-child(4) .circle_txt {
		background-color: #ffa66a;
	}

	.dflex:nth-child(5) .circle_txt {
		margin-bottom: 0rem;
		background-color: #b96bff;
	}

	.idea-day-line {
		width: 100%;
		height: 320px;
		margin-bottom: 72px;
	}

	.idea-type-pie {
		width: 100%;
		height: 300px;
		margin-bottom: 72px;
	}

	.user-fans-column {
		width: 100%;
		height: 300px;
		margin-bottom: 72px;
	}

	.idea-bar {
		width: 100%;
		height: 300px;
		margin-bottom: 72px;
	}

	.box {
		display: flex;
		flex-wrap: wrap;
	}

	.charts-title {
		font-size: 20px;
		color: #1f2f3d;
		font-weight: 700;
		margin-bottom: 12px;
	}

	@media screen and (min-width: 500px) {
		.idea-type-pie {
			width: 40%;
			height: 300px;
		}

		.user-fans-column {
			width: 60%;
			height: 300px;
		}

		.idea-bar {
			width: 33%;
			height: 300px;
			margin-bottom: 72px;
		}
	}
</style>